<template>
    <div class="out_box" v-cloak>
        <div class="relative content_box">
            <div class="case_box code_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        我的专属二维码
                    </h2>
                </div>
                <div class="content">
                    <p class="font_gray">
                        我的推广链接：<input class="website font_theme" id="website" value="http://www.grinok.com/" />
                        <span class="font_theme ml_20 pointer bold" @click="copyData()">复制</span>
                    </p>
                    <p class="tips">您可以将该网址复制粘贴到您的推广文案中，以达到网络推广的目的和效果。</p>
                    <div class="code">
                        <div class="img_box" id="qrcode">
                            <!-- <img class="img" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1231092524,2455027789&fm=26&gp=0.jpg" /> -->
                        </div>
                        <p>我的专属二维码</p>
                        <v-button class="btn" id="btn" type="primary" size="large" @click="downloadData()">保存二维码</v-button>
                    </div>
                </div>
            </div>
            <div class="poster_box">
                <div class="title_box">
                    <p class="title">专题分享海报</p>
                    <p class="desc">您可以下载不同主题和风格的海报分享到您的社交账户(如：微信、微博、抖音等)，以达到网络推广的目的和效果。</p>
                </div>
                <div class="content cl">
                    <div class="list">
                        <img class="img" :src="img_url_appSource + 'poster_1.jpg'" />
                        <v-button class="btn btn1" type="primary" size="large" @click="getData()">下载</v-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import '@common/jquery.qrcode.min.js';

    export default {
        name: "QRcode",
        data: function() {
            return {
                dataForm: {
                    name: '',
                    password: '',
                    mobilePhone: '',
                    mail: ''
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            copyData: function() {
                $("#website").select();
                if (document.execCommand("Copy","false",null) === true) {
                    this.$notification.success({
                        message: '操作成功！！',
                        description: '复制成功！！',
                    });
                } else {
                    this.$notification.error({
                        message: '操作失败！！',
                        description: '复制失败！！',
                    });
                }
            },
            downloadData: function() {
                const qrcode = $("#qrcode>canvas");
                $.$downloadCanvasImg(qrcode);
            }
        },
        mounted: function() {
            const website = this.related_pages + '/html/regisiter.html?memberid=' + this.userDATA.memberid;
            $('#website').val(website);
            $('#qrcode').qrcode({
                render: "canvas",
                text: website,
                width: '90',
                height: '90',
                src: require('@assets/favicon.jpg'),
                correctLevel: 3
            });
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            >.title{
                padding: 16px 20px;
                font-size: 13px;
                color: white;
                background: linear-gradient(225deg, #56ccf2 0%, #2948ff 100%);
            }
        }
        .code_box .content{
            padding: 20px;
            font-size: 17px;
            background-color: white;
            .website{
                width: 680px;
                font-size: 17px;
                border: none;
                vertical-align: initial;
            }
            .tips{
                margin-top: 20px;
                font-size: 10px;
            }
            .code{
                margin-top: 40px;
                font-size: 10px;
                text-align: center;
                .img_box{
                    width: 90px;
                    height: 90px;
                    margin: 4px auto;
                    padding: 4px;
                    border: 2px solid black;
                    border-radius: 8px;
                }
                .btn{
                    width: 180px;
                    height: 36px;
                    margin: 40px 0;
                    box-sizing: border-box;
                    .theme_linear_ellipsis_btn;
                }
            }
        }
        .poster_box{
            padding: 20px;
            background-color: white;
            .title{
                font-size: 17px;
                margin-bottom: 6px;
            }
            .desc{
                font-size: 10px;
            }
            .content{
                padding: 40px 20px;
                text-align: center;
                .list{
                    float: left;
                    width: 25%;
                    .img{
                        width: 70%;
                        max-width: 130px;
                        margin-bottom: 18px;
                        border-radius: 8px;
                    }
                    .btn{
                        width: 66px;
                        height: 30px;
                        font-size: 13px;
                        box-sizing: border-box;
                        .theme_linear_ellipsis_btn;
                    }
                }
            }
        }
    }
</style>
